<template>
	<view>

		<cu-custom bgColor="bg-blue-11" :isBack="true">
			<view slot="backText">
				返回
			</view>
			<view slot="content">
				申请教室
			</view>
		</cu-custom>
		<view class="margin-sm padding-sm bg-white" style="border-radius:20rpx;">
			<view class="cu-list menu sm-border">
				<view class="cu-form-group">
					<view class="title">申请人</view>
					<input v-model='applyForm.borrower' placeholder="请输入姓名"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">申请教室</view>
					<view class="action">
						<button class="cu-btn bg-orange-1 shadow"
							@click="modalName = 'emptyRes'">{{emptyResText}}</button>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="text-orange"></text>选择借用资源
					</view>
					<view class="action">
						<button class="cu-btn bg-orange-1 shadow" @click="modalName = 'typeList'">{{typeText}}</button>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">选择学期</view>
					<term-picker @choiceSession="choiceSession" @confirm="confirmClick"></term-picker>
				</view>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action"> 选择周数 </view>
					<view class="action">
						<button class="cu-btn bg-orange-1 shadow"
							@click="modalName = 'WeekModal'">第{{thisWeek}}周</button>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action"> 选择星期 </view>
					<view class="action">
						<button class="cu-btn bg-orange-1 shadow"
							@click="modalName = 'DayModal'">星期{{title[thisDay]}}</button>
					</view>
				</view>
				<view class="uni-form-item cu-form-group">
					<view class="title">借用开始时间</view>
					<picker mode="date" :value="borrowStartdate" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view>{{borrowStartdate}}</view>
					</picker>
				</view>
				<view class="uni-form-item cu-form-group">
					<view class="title">借用结束时间</view>
					<picker mode="date" :value="borrowEnddate" :start="startDate" :end="endDate"
						@change="bindDateChangeEnd">
						<view>{{borrowEnddate}}</view>
					</picker>
				</view>

			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-orange-1 round shadow-blur lg" @click="applyClassRoom">申请教室</button>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='WeekModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">单选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray">
					<view v-for="(item,index) in 20" class="padding-xs" :key="index">
						<button class="cu-btn blue block" :class="index+1==thisWeek?'bg-blue':'line-blue'"
							@click="thisWeek=(index+1)">第{{index+1}}周
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='emptyRes'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">多选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray" v-if="this.emptyResCheckList.length>0">
					<view v-for="(item,index) in emptyResCheckList" class="padding-xs" :key="index" >
						<button class="cu-btn blue block" :class="item.checked?'bg-blue':'line-blue'"
							@click="emptyRoomCheck(item)">{{item.name}}
						</button>
					</view>
				</view>
				<view v-else class="grid col-4 padding-sm bg-gray"  >
                       <view>
						   暂无空闲资源
					   </view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='typeList'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">多选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray">
					<view v-for="(item,index) in typeList" class="padding-xs" :key="index">
						<button class="cu-btn blue block" :class="item.checked?'bg-blue':'line-blue'"
							@click="classCheck(item)">{{item.name}}
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='DayModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @click="modalName=null">单选</view>
					<view class="action text-green" @click="modalName=null">确定</view>
				</view>
				<view class="grid col-4 padding-sm bg-gray">
					<view v-for="(item,index) in 7" class="padding-xs" :key="index">
						<button class="cu-btn blue block" :class="index==thisDay?'bg-blue':'line-blue'"
							@click="thisDay=(index)">星期{{title[index]}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				emptyRes: [],
				borrowStartdate: currentDate,
				borrowEnddate: currentDate,
				sessionId: '',
				modalName: '',
				thisWeek: 1,
				thisDay: new Date().getDay(),
				title: ['一', '二', '三', '四', '五', '六', '日'],
				// 申请表单信息
				applyForm: {
					borrower: '',
					resname: '',
					resourceid: '',
				},
				emptyResCheckList: [],
				typeText: '多媒体教室',
				typeInt: 10,
				emptyResText: '一教1101',
				emptyresInt: '',
				typeList: [{
						value: 10,
						name: '多媒体教室',
						checked: 'true'
					},
					{
						value: 22,
						name: '凳子',
						checked: ''
					},
					{
						value: 11,
						name: '电脑教室',
						checked: ''
					},
				]
			}
		},
		onLoad(options) {},
		created() {
			const value = wx.getStorageSync('start_day')
			let subWeek = parseInt(this.dateMinus(value) / 7) + 1;
			if (!(subWeek >= 1 && subWeek <= 20)) {
				subWeek = 1
			}
			this.thisWeek = subWeek
			this.getClass()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getClass: function() {
				let postData = {
					weeknum: this.thisWeek,
					weekorder: this.thisDay
				}
				console.log('postData:', postData)
				this.$reqJson("wxapi/emptyroom", "post", postData, res => {
					let resList = res.content
					this.emptyResCheckList = []
					let i = 0
					for (let item of resList) {
						if (i === 0) {
							this.emptyResCheckList.push({
								value: item.id,
								name: item.roomname,
								checked: 'true'
							})
							this.emptyResText = item.roomname
							this.emptyresInt = item.id
						} else {
							this.emptyResCheckList.push({
								value: item.id,
								name: item.roomname,
								checked: ''
							})
						}
						i++;
					}

				})
			},
			applyClassRoom() {
				var postData = {
					resourceid: this.emptyresInt,
					rtype: this.typeInt,
					resname: this.emptyResText,
					weeknum: this.thisWeek,
					weekorder: this.thisDay,
					borrower: this.applyForm.borrower,
					sessionId: this.sessionId,
					start: this.borrowStartdate,
					end: this.borrowEnddate
				}
				console.log(postData)
				this.$reqJson("wxapi/emptyroom/apply", "post", postData, res => {
					console.log(res)
					if (res.code === 0) {
						uni.showToast({
							title: res.message,
							duration: 2000
						});
						this.returnBackResPage()
					}else{
						uni.showToast({
								title: res.message,
								duration: 2000
						});
					}
		
				})
			},
			returnBackResPage(resourceid) {
				// 获取当前空教室列表所选的 id
				uni.navigateTo({
					url: "/pages/home/classroom/classroom",
					fail: res => {
						console.log(res)
					}
				})
			},
			emptyRoomCheck(item) {
				let items = this.emptyResCheckList;
				let listIndex = [];
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value === item.value) {
						items[i].checked = !items[i].checked;
						break;
					}
				}
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].checked) {
						listIndex.push(items[i].roomname)
						// typeId += items[i].value
					}
				}
				this.emptyResCheckList = items
				this.emptyresInt = item.id
				this.applyForm.resname = item.roomname
			},
			classCheck(item) {
				let items = this.typeList;
				let listIndex = [];
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value === item.value) {
						items[i].checked = !items[i].checked;
						break;
					}
				}
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].checked) {
						listIndex.push(items[i].name)
						// typeId += items[i].value
					}
				}
				console.log(listIndex)
				this.typeList = items
				this.typeText = listIndex.join()
				this.typeInt = item.value
			},
			// 获取今天距离某天相差天数
			dateMinus: function(whichDay) {
				let sdate = new Date(whichDay);
				let now = new Date();
				let days = now.getTime() - sdate.getTime();
				let day = parseInt(days / (1000 * 60 * 60 * 24));
				return day;
			},
			choiceSession: function(e) {
				console.log(e)
				this.sessionId = e
			},
			confirmClick: function() {
				this.getGrade()
			},
			getGrade: function() {
				let postData = {
					uId: uni.getStorageSync('user_info').id,
					sessionId: this.sessionId,
				}
				this.$reqJson("wxapi/score", "get", postData, res => {
					this.gradeList = res.content
				})
			},
			bindDateChange(e) {
				this.borrowStartdate = e.target.value
				console.log('picker发送选择改变，携带值为', e.target.value)
				// this.date = e.target.value
			},
			bindDateChangeEnd(e) {
				this.borrowEnddate = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss">

</style>
